<template>
	<contents :heightInclude="['tabBar']" class="pay_pass_page">
		<u-form
			:model="form"
			ref="form"
			label-width="165"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<u-form-item :label="$t('locales.phone')" prop="mobile">
				<u-input
					disabled
					type="number"
					v-model="form.mobile"
					:placeholder="$t('locales.inputPhone')"
					maxlength="11"
				/>
			</u-form-item>
			<u-form-item :label="$t('locales.SMSCode')" prop="validateCode">
				<u-input
					type="number"
					maxlength="6"
					v-model="form.validateCode"
					:placeholder="$t('locales.inputSMSCode')"
				/>
				<SetCode
					slot="right"
					:phone="form.mobile"
					uniqueKey="setmobile"
				/>
			</u-form-item>
			<u-form-item :label="$t('locales.paymentPwd')" prop="payPwd">
				<u-input
					@click="openKeyboard(0)"
					disabled
					maxlength="6"
					v-model="form.payPwd"
					:placeholder="$t('locales.inputPwd')"
					type="password"
					:password-icon="false"
					:clearable="false"
				/>
				<!-- <view class="pay_input">{}</view> -->
			</u-form-item>
			<u-form-item :label="$t('locales.enterPwd')" prop="rePayPwd">
				<u-input
					@click="openKeyboard(1)"
					disabled
					maxlength="6"
					v-model="form.rePayPwd"
					:placeholder="$t('locales.enterPwdMsg')"
					type="password"
					:password-icon="false"
					:clearable="false"
				/>
			</u-form-item>
		</u-form>
		<u-keyboard
			:disabled-keyboard="false"
			ref="uKeyboard"
			v-model="show"
			:mask="false"
			:show-tips="false"
			:dot-enabled="false"
			:tooltip="false"
			random
			@change="valChange"
			@backspace="backspace"
		></u-keyboard>
		<SubmitBtn @click="submit" />
	</contents>
</template>

<script>
import SetCode from '@/components/setSmsCode'
import SubmitBtn from '@/components/submitBtn'
import { setPayPwd } from '@/api/http/user'
export default {
	components: {
		SetCode,
		SubmitBtn
	},
	data() {
		return {
			form: {
				mobile: '',
				validateCode: '',
				payPwd: '',
				rePayPwd: ''
			},
			rules: {
				mobile: [
					{
						required: true,
						message: this.$t('locales.inputPhone'),
						trigger: 'blur'
					}
				],
				validateCode: [
					{
						required: true,
						message: this.$t('locales.inputSMSCode'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitErr'),
						trigger: 'blur'
					}
				],
				payPwd: [
					{
						required: true,
						message: this.$t('locales.pleaseEnterPassword'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitPwdErr'),
						trigger: 'blur'
					}
				],
				rePayPwd: [
					{
						required: true,
						message: this.$t('locales.pleaseEnterPassword'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitPwdErr'),
						trigger: 'blur'
					}
				]
			},
			show: false,
			payPwd: '',
			editType: ''
		}
	},
	onLoad(opt) {
		this.form.mobile = opt.mobile
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return
				setPayPwd({
					...this.form
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					if (res.code === 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			})
		},
		openKeyboard(type) {
			this.editType = type
			this.show = true
		},
		valChange(val) {
			if (this.editType === 0) {
				if (this.form.payPwd.length === 6) return
				this.form.payPwd += val
			} else {
				if (this.form.rePayPwd.length === 6) return
				this.form.rePayPwd += val
			}
		},
		backspace() {
			if (this.editType === 0) {
				if (this.form.payPwd.length)
					this.form.payPwd = this.form.payPwd.substr(0, this.form.payPwd.length - 1)
			} else {
				if (this.form.rePayPwd.length)
					this.form.rePayPwd = this.form.rePayPwd.substr(0, this.form.rePayPwd.length - 1)
			}
		}
	}
}
</script>

<style lang="scss">
.pay_pass_page {
	.u-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
}
</style>
